﻿<html class="pixel-ratio-1">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>企业文档</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!-- Google Web Fonts -->

    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.5.8/css/sm.min.css">
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.5.8/css/sm-extend.min.css">
    <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_1464664061_1061604.css">

    <link rel="stylesheet" type="text/css" href="/View_Mobile/CSS/animate.css">
    <link rel="stylesheet" type="text/css" href="/View_Mobile/CSS/mob.css">
    <style>
        .bar-tab.sq {
            background: #fff;
            box-shadow: 0 -.05rem .1rem rgba(0,0,0,.1);
            font-size: 0.7rem;
        }

            .bar-tab.sq .tab-item:before {
                content: '';
                position: absolute;
                left: 0;
                top: .45rem;
                bottom: auto;
                right: auto;
                height: 50%;
                width: 1px;
                background-color: #e7e7e7;
                display: block;
                z-index: 15;
                -webkit-transform-origin: 50% 0;
                transform-origin: 50% 0;
            }

            .bar-tab.sq .tab-item .iconfont {
                padding-right: .2rem;
            }

        .name-card {
            position: absolute;
            top: 0.4rem;
            left: 3.3rem;
        }

            .name-card i {
                font-size: 0.6rem;
                color: #999;
                font-style: normal;
            }

        .card-title {
            font-size: 1rem;
        }

        .pl-zan {
            border-bottom: 1px solid #eaeaea;
            min-height: 2.2rem;
            padding: .5rem .75rem;
        }

        .tab-pl {
            font-size: 0.7rem;
            color: #666;
        }

            .tab-pl span {
                padding: 0 0.6rem;
            }

                .tab-pl span.active {
                    color: #F98002;
                    border-bottom: 2px solid #F98002;
                    padding-bottom: 0.6rem;
                }

                .tab-pl span i {
                    margin-right: 0.3rem;
                }

        .tx {
            width: 1.8rem;
            border-radius: 50%;
        }
        /*.zan-list .item-media{padding-left:1rem;} 
.zan-list .item-title{font-size: .7rem}*/

        .zan-list {
            padding: 0.5rem 0.8rem;
            border-bottom: 1px solid #efefef;
            position: relative;
        }

            .zan-list span {
                position: absolute;
                top: .8rem;
                left: 3rem;
            }

            .zan-list div {
                position: absolute;
                left: 3rem;
                top: 1rem;
            }

    </style>
</head>
<body>
    <div class="page-group">
        <div class="content" style="padding-bottom:1.5rem;">

           
            <div class="list-block list-talk">

                <div class="card">
                    <div class="card-header">

                        <img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" class="talk-icon">
                        <span class="name-card">张理想<br /><i>2014-03</i></span>


                    </div>
                    <div class="card-content">
                        <div class="card-content-inner">
                            <div class="card-title">我是一个标题标题，很长</div>头和尾的卡片。卡头是用来显示一些额外的信息，或自定义操作卡标题和页脚。
                        </div>

                        <div class="card-header">
                            <div class="tab-pl">
                                <span class="tab-label active"><i class="iconfont icon-xiaoxi"></i>评论</span>
                                <span class="tab-label"><i class="iconfont icon-zan"></i>赞9</span>
                            </div>


                        </div>
                        <div class="zan-box">
                            <div class="zan-list">
                                <img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" class="tx">
                                <span>wowoowowowo</span>
                            </div>
                            <div class="zan-list">
                                <img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" class="tx">
                                <span>wowoowowowo</span>
                            </div>
                        </div>
                        <div class="list-block">

                            <ul>
                                <li>
                                    <div class="item-content">
                                        <div class="talk-box">
                                            <div class="talk-item">
                                                <img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" class="talk-icon">
                                            </div>
                                            <div class="talk-cont">
                                                <div class="talk-head">张理想<span class="talk-time">17分钟前</span></div>


                                                <div class="talk-text-2">
                                                    我是一个是一个很长的标题我是一个是一个很长的标题我是一个是一个很长的标题我是一个是一个很长的标题我是一个是一个很长的标题我是一个是一个很长的标题
                                                </div>

                                            </div>

                                        </div>
                                    </div>
                                </li>



                            </ul>


                        </div>




                    </div>



                </div>

            </div>

        </div>
        <nav class="bar bar-tab sq">

            <a class="tab-item external" href="#">

                <span class="tab-label"><i class="iconfont icon-xiaoxi"></i>评论</span>
            </a>

            <a class="tab-item external" href="#">

                <span class="tab-label"><i class="iconfont icon-zan"></i>赞</span>
            </a>
        </nav>
        <script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
        <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.5.8/js/sm.min.js' charset='utf-8'></script>
        <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.5.8/js/sm-extend.min.js' charset='utf-8'></script>
        <!-- 头部滑动js -->
        <script type="text/javascript" src="/View_Mobile/JS/touch-tab.js"></script>
        <script type="text/javascript">
            $(function () {
                $(".zan").click(function () {
                    $(this).toggleClass("active animated pulse");
                })
                h = $(".pictur img").width();
                $(".pictur img").height(h);
            })

        </script>
</body>
</html>